import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.1
import org.qtproject.qtquick 1.0

import "qrc:/js/resources/Constants.js" as Constant

import "../common"
import "../registration"

MainBasePage {
    id: id_register

    width: 480 * m_ratio
    height: 640 * m_ratio

    m_header.title: "register..."
    m_header.showBack: true;
    m_header.onBackClicked: {
        console.log("m_header.onBackClicked: ");
        id_pageView.pop();
    }


    property real m_ratio : ApplicationInfo.ratio
    property real progress: 0

    RowLayout{
        anchors.fill: parent
        anchors.verticalCenter: parent.verticalCenter
        ColumnLayout {
            spacing: 20 * m_ratio

            ColumnLayout {
                spacing: 10 * m_ratio
                TextField {
                    id: id_txtPhone
                    style :id_touchStyle
                    placeholderText: "enter your phone number"
                    Layout.fillWidth: parent
                    opacity: 0.5

                    focus: true

                    onTextChanged: {

                        if (id_txtPhone.length >= 10 && id_txtPhone.length <= 11) {
                            id_bttnActivavtionCode.enabled = true;
                            id_bttnReceivedActiveCode.enabled = true;
                        } else {
                            id_bttnActivavtionCode.enabled = false;
                            id_bttnReceivedActiveCode.enabled = false;
                        }
                        id_txtPhone.opacity = 1

                        if (id_txtPhone.length === 0) {
                            id_txtPhone.opacity = 0.5
                        }
                    }

                }
                ButtonDesigne {
                    id: id_bttnReceivedActiveCode

                    text: "Recieved Activation Code";
                    Layout.fillWidth: parent

                    enabled: false

                    onClicked: {
                        Constant.m_phone = id_txtPhone.text
                        id_pageView.push(Qt.resolvedUrl("qrc:/Qml/gui/registration/TermAndPolicy.qml"));
                    }
                }
            }

            ColumnLayout{
                Label {
                    id: id_lblActiveCode
                    text: "You have the activation code"
                }
                ButtonDesigne {
                    id: id_bttnActivavtionCode

                    text: "Enter Active code";
                    Layout.fillWidth: parent

                    enabled: false

                    onClicked: {
                        Constant.m_phone = id_txtPhone.text
                        id_pageView.push(Qt.resolvedUrl("qrc:/Qml/gui/registration/ActiveCode.qml"));
                    }
                }
            }
        }
    }

    Component {
        id: id_touchStyle
        TextFieldStyle {
            //textColor: "white"
            //font.pixelSize: 28 *m_ratio
            background: Item {
                implicitHeight: 50
                implicitWidth: 320
                BorderImage {
                    source: "qrc:/staticdata/images/textinput.png"
                    border.left: 8
                    border.right: 8
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
            }
        }
    }


    Component {
        id: touchStyle
        ButtonStyle {
            panel: Item {
                implicitHeight: 50
                implicitWidth: 320
                BorderImage {
                    anchors.fill: parent
                    antialiasing: true
                    border.bottom: 8
                    border.top: 8
                    border.left: 8
                    border.right: 8
                    anchors.margins: control.pressed ? -4 : 0
                    source: control.pressed ? "qrc:/staticdata/images/button_pressed.png" : "qrc:/staticdata/images/button_default.png"
                    Text {
                        text: control.text
                        anchors.centerIn: parent
                        color: "white"
                        font.pixelSize: 23
                        renderType: Text.NativeRendering
                    }
                }
            }
        }
    }

}
